<template>
    <el-card shadow="hover" style="margin-top: 10px;">
        <div slot="header" class="clearfix">
            <span>{{ $i18n.t('TEL_VERIFY_RECORD') }}</span>
            <el-button v-if="editable" type="primary" style="float: right;" @click="onLocalSubmit" :loading="btnLoading">{{ $i18n.t('SAVE') }}</el-button>
        </div>
        <el-table border style="width: 100%;" :data="data">
            <el-table-column align="center" prop="label" :label="$i18n.t('VERIFY_OPTION')"></el-table-column>
            <el-table-column align="center" prop="value" :label="$i18n.t('RECORD')">
                <template slot-scope="scope">
                    <Input
                        type="textarea"
                        :rows="editable ? 2 : 1"
                        v-model="data[scope.$index].value"
                        :placeholder="editable ? $i18n.t('PLEASE_INPUT', { value: scope.row.label }) : ''"
                        :disabled="!editable"
                    />
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script>
    export default {
        name: 'TelVerifyTable',
        props: {
            data: {
                type: Array,
                required: true
            },
            btnLoading: {
                type: Boolean,
                required: false,
                default: false
            },
            editable: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            onLocalSubmit () {
                this.$emit('on-submit')
            }
        }
    }
</script>

<style scoped>

</style>
